﻿@{
    ViewData["Title"] = "Process Page";
}

<head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css" />
</head>

<script>

    $(function () {

        $.noConflict();

        $("#bar").hide()

        $('#myTable').DataTable({
            scrollY: "500px",
            scrollX: true,
            scrollCollapse: true,
            paging: true,
            columnDefs: [
                { width: 200, targets: 0 }
            ],
            fixedColumns: true
        });
    });

    function GetReport() {

        $("#bar").show()
        var email = $('#email').val();
        if (email == "") {
            alert("Please enter an email address");
            return;
        }

        $.ajax('GetReport', {
            type: 'POST',  // http method
            data: 'email=' + email,  // data to submit
            success: function (data, status, xhr) {

                $("#bar").hide()
                alert(data);
            },

        });
    }

    function ProcessImages() {

        $("#bar").show()
        var email = $('#email').val();

        $.ajax('GetObjects', {
            type: 'GET',  // http method
            success: function (data, status, xhr) {
                $("#bar").hide()
                var xml = data
                var oTable = $('#myTable').dataTable();
                oTable.fnClearTable(true);
                $(xml).find('Item').each(function () {

                    var $field = $(this);
                    var key = $field.find('Key').text();
                    var name = $field.find('Owner').text();
                    var size = $field.find('Size').text();

                    //Set the new data.
                    oTable.fnAddData([
                        key,
                        name,
                        size]
                    );
                });
            },
        });
    }

</script>


<h1 class="display-4">AWS Photo Analyzer Application</h1>
<p>You can generate a report that analyzes the images in the S3 bucket. You can send the report to the following email address. </p>
<label for="email">Email address:</label>
<br>
<input type="text" id="email" name="email" value="">
<br>
<div id="bar" class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar"
         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:90%">
        Generating Report
    </div>
</div>
<p>Click the following button to obtain a report</p>
<button onclick="GetReport()">Analyze Photos</button>

<div>
    <br>

    <p>Click the following button to determine the number of images in the bucket</p>

    <button onclick="ProcessImages()">Get Images</button>
    <table id="myTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Owner</th>
                <th>Size</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>No Data</td>
                <td>No Data</td>
                <td>No Data</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Owner</th>
                <th>Size</th>
            </tr>
        </tfoot>
        <div id="success3"></div>
    </table>

</div>
